<html>
  <head>
    <title>Lesson02 - React第二课之JSX简介</title>
  </head>
  <body>
    <div id="app"></div>
    <ul>
      <li>JSX中的表达式要包含在大括号里</li>
      <li>JSX中的所有标签必须闭合，否则报错</li>
      <li>JSX中有防注入攻击机制，无法在JSX中嵌入JS脚本即`script`标签</li>
    </ul>
    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      function formatName(user) {
        return user.firstName + ' ' + user.lastName
      }

      const user = {
        firstName: '哈士奇',
        lastName: '架构师卓'
      }

      const imgUrl = 'http://b-ssl.duitang.com/uploads/item/201506/14/20150614125826_cZKPT.thumb.700_0.jpeg';

      const appDom = document.getElementById('app');
      const content = (
        <div>
          <h1 style={{backgroundColor: '#000', color: '#fff'}}>Hello {formatName(user)}!</h1>
          <img src={imgUrl} width={'100px'} />
        </div>
      )
      ReactDOM.render(content, appDom);
    </script>
  </body>
</html>